<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <title>设备联动</title>
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/layout.css">
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/mqttws31.js"></script>
    <script type="text/javascript" src="../script/jquery-2.1.3.js"></script>
    <script type="text/javascript" src="../script/mico_speech.js"></script>
</head>
<body>
    <div class="wrapper">
        <!--顶部标题-->
        <header id="header" class="header">
            <div class="head">
                <a class="left" onclick="checkpage()" id="backleft">返回</a>
                <span class="center" id="device_name">我的设备</span>
            </div>
        </header>
        <div class="content">
            <div class="block temphumishow clearfix">
                <div class="col_50">
                    <div class="wrap">
                        <img src="../image/01-temperature.svg">
                        <span class="tpt">温度</span>
                        <span class="tempcls" id="tempid">20.1℃</span>
                    </div>
                </div>
                <div class="col_50">
                    <div class="wrap">
                        <img src="../image/01-humidity.svg">
                        <span class="hdy">湿度</span>
                        <span class="humicls" id="humiid">40.1%</span>
                    </div>
                </div>
            </div>
            <div class="block direspeedshow clearfix">
                <div class="col_50">
                    <div class="wrap">
                        <img src="../image/01-direction.svg">
                        <span class="drt">风向</span>
                        <span class="direction" id="drtid">10.1°</span>
                    </div>
                </div>
                <div class="col_50">
                    <div class="wrap">
                        <img src="../image/01-speed.svg">
                        <span class="spd">风速</span>
                        <span class="speed" id="spdid">40.1km/h</span>
                    </div>
                </div>
            </div>
            <div class="block light clearfix">
                <div class="col_50">
                    <div class="wrap">
                        <img src="../image/led.svg">
                        <span class="lit">光强</span>
                        <span class="light" id="litid">0lux</span>
                    </div>
                </div>
                <!-- <div class="col_50">
                    <div class="wrap">
                        <img src="../image/01-speed.svg">
                        <span class="spd">风速</span>
                        <span class="speed" id="spdid">40.1km/h</span>
                    </div>
                </div> -->
            </div>
            <br/>
            <div id="device_id"></div>
            <div id="debug"></div>
        </div>
    </div>
</body>
    <script>
        var device_id;
        var micoMqtt = null;
        //听我指令
        var listenme = 0;
        apiready = function() {
            //alert(api.systemVersion.substring(0,3));
            if (parseFloat(api.systemVersion.substring(0,3)) >= 4.4) {
                $(".header").css("padding-top", "35px");
                $(".content").css("height", document.body.clientHeight - 76);
            } else {
                $(".header").css("padding-top", "15px");
                $(".content").css("height", document.body.clientHeight - 56);
            }
            device_id = api.pageParam.deviceid;
            document.getElementById('device_name').innerHTML = api.pageParam.devicename;
            // 如果设备ID不为空，则执行连接MQTT的操作
            if (device_id !== null) {
                ez_connect(device_id);
            }
            if (api.systemType != 'ios') {
                api.addEventListener({
                    name : "keyback"
                }, function(ret, err) {
                    checkpage();
                });
            } else {
                // $(".header").css("padding-top", "30px");
                // $(".left").css("top", "32px");
            }
        };
        // 连接MQTT服务
        function ez_connect(device_id) {
            document.getElementById('device_id').innerHTML = "设备ID：" + device_id;
            //首先引用MiCOmqtt
            micoMqtt = api.require("micoMqtt2");
            var host = "api.easylink.io";
            var username = "";
            var password = "";
            //clientID，需要按照此标准来定义：v1-app-[MAC]  版本号-app-手机MAC(12位)
            var clientID = "v1-app-" + parseInt(Math.random() * (1000000000000), 12);
            var topic = device_id + '/out/#';
            micoMqtt.startMqtt({
                micoMqtt : micoMqtt,
                host : host,
                username : username,
                password : password,
                clientID : clientID,
                topic : topic
            }, function(ret, err) {
                if (ret.status) {
                    console.log("连接成功");
                    recvmsg();
                } else {
                    console.log("连接失败");
                }
            });
        }

        // 接收数据
        function recvmsg() {
            var msgindex = 1;
            var msgjson;
            micoMqtt.recvMqttMsg(function(ret, err) {
                //              alert(JSON.stringify(ret));
                if (ret) {
                    if (msgindex > 12) {
                        msgindex = 1;
                        document.getElementById('debug').innerHTML = "";
                    }
                    msgindex++;
                    msgjson = ret.subs;
                    var tempval = msgjson.temperature;
                    var humival = msgjson.humidity;
                    var winddirection = msgjson.wind_direction;
                    var windspeed = msgjson.wind_velocity;
                    var light = msgjson.light;

                    if ("undefined" != typeof (tempval) ||
                    "undefined" != typeof (humival) || 
                    "undefined" != typeof (winddirection) || 
                    "undefined" != typeof (light) || 
                    "undefined" != typeof (windspeed)) {
                        // 显示温度
                        $("#tempid").text(tempval/10 + "℃");
                        // 显示湿度
                        $("#humiid").text(humival/10 + "%");
                        // 显示风向
                        // var winddrt = "无";
                        // switch(winddirection){
                        //     case 0: winddrt = "正北";
                        //     case 1: winddrt = "东北";
                        //     case 2: winddrt = "正东";
                        //     case 3: winddrt = "东南";
                        //     case 4: winddrt = "正南";
                        //     case 5: winddrt = "西南";
                        //     case 6: winddrt = "正西";
                        //     case 7: winddrt = "西北";
                        // }
                        // $("#drtid").text(winddrt);
                        $("#drtid").text(winddirection/10+"°");
                        $("#spdid").text(windspeed/10+"km/h");
                        $("#litid").text(light+"lux");
                    }
                } else {
                    api.alert({
                        msg : err.msg
                    });
                }
            });
        }

        //发送指令
        function publishcmd(topic, command) {
            micoMqtt.publish({
                topic : topic,
                command : command
            }, function(ret, err) {
            });
        }


        // 日志打印在页面的部分
        var i = 0;
        console.log = ( function(old_funct, div_log) {
                return function(text) {
                    old_funct(text);
                    var p = '';
                    if (i % 2 == 0)
                        p = '<p>';
                    else
                        p = '<p class=\'gray\'>';
                    if ( typeof text === "object")
                        div_log.innerHTML += p + JSON.stringify(text) + '</p>';
                    else
                        div_log.innerHTML += p + text + '</p>';
                    div_log.scrollTop = div_log.scrollHeight;
                    i += 1;
                };
            }(console.log.bind(console), document.getElementById("debug")));
        console.error = console.debug = console.info = console.log;
        //      返回上一页
        function checkpage() {
            //关闭mqtt，关闭的时候需要同事关闭消息接收和MQTT连接
            micoMqtt.stopRecvMqttMsg(function(ret, err) {
            });
            micoMqtt.stopMqtt(function(ret, err) {
            });
            window.location.href = "./devlist.html";
        };
    </script>
</html>
